import React, { Component } from "react";
import { DeleteOutlined, EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Divider, message } from "antd";
import { getVideoList, getVideoListCategory, deleteVideo } from "@/api/video";
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader';
import EditForm from "./components/edit"
import { VIP_DEGREE, LANDSCAPE, VIDEO_LENGTH } from '@/utils/constant'
import { getToolTip, getImage} from '@/utils/renderCell'
import { widgetProps } from '@/utils/constant';
class Video extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    categoryList: [],
    editModalVisible: false, // 编辑新增 显示控制
    currentRowData: {},
    listQuery: {},
    editMode: false // 添加 编辑模式
  };

  componentDidMount () {
    getVideoListCategory().then(res => {
      this.setState({
        categoryList: res.data || []
      })
    })
  };


  // 表格数据更新 抛出数据
  handleGetData = data => {
    this.setState({
      list: data.list
    })
  }
  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };


  handleDeleteUser = (row) => {
    const { id } = row
    deleteVideo({ id }).then(res => {
      message.success("删除成功")
      this.tableRef.current.fetchData();
    })
  }

  hadnleAditAddOkHandler = (values, form) => {
    this.tableRef.current.fetchData();
    this.setState({
      editUserModalVisible: false,
    });
  };

  // 取消操作 关闭抽屉
  handleCancel = _ => {
    this.setState({
      editUserModalVisible: false,
    });
  };


  handleAddUser = (row) => {
    this.setState({
      editUserModalVisible: true,
      editMode: false
    });
  };
  handleEditUser = (row) => {
    const currentRowData = this.state.list.find(v => v.id === row.id)
    this.setState({
      currentRowData,
      editUserModalVisible: true,
      editMode: true
    });
  };

  // 头部搜索配置
  meta = {
    fields: [
      {
        key: 'title',
        label: '标题',
        widgetProps
      }
    ],
  };

  // 表格列 字段定义
  columns = [
    {
      title: '视频ID',
      dataIndex: 'id',
      fixed: 'left',
      width: 80,
      key: 'id',
    },
    {
      title: '标题',
      dataIndex: 'title',
      fixed: 'left',
      ellipsis: true,
      width: 200,
      render: getToolTip,
      key: 'title',
    },
    {
      title: '时长',
      width: 90,
      dataIndex: 'duration',
      key: 'duration',
    },
    {
      title: '视频链接',
      width: 120,
      ellipsis: true,
      dataIndex: 'storageLocation',
      render: text => (<a target="_blank" rel="noopener noreferrer"  href={text}>{text}</a>),
      key: 'storageLocation',
    },
    {
      title: '积分价格',
      width: 120,
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '视频vip等级',
      dataIndex: 'vip',
      width: 160,
      key: 'vip',
      render: cell => (<span>{VIP_DEGREE[cell] || '-'}</span>)
    },
    {
      title: '大小',
      dataIndex: 'size',
      width: 120,
      key: 'size',
      render: size => (<span>{parseFloat(size / 1024).toFixed(2)} MB</span>)
    },
    {
      title: '视频描述信息',
      ellipsis: true,
      width: 200,
      render: getToolTip,
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '视频封面',
      dataIndex: 'coverUrl',
      width: 100,
      render: getImage,
      key: 'coverUrl',
    },
    {
      title: '分类名称',
      width: 150,
      dataIndex: 'cateName',
      key: 'cateName',
    },
    // 视频上传者头像链接（可默认取管理平台用户avatar）
    {
      title: '上传者头像',
      dataIndex: 'authorPicUrl',
      width: 120,
      render: getImage,
      key: 'authorPicUrl',
    },
    {
      title: '图标图片',
      dataIndex: 'iconUrl',
      width: 120,
      render: getImage,
      key: 'iconUrl',
    },
    {
      title: '横竖屏类型',
      dataIndex: 'isLandscape',
      width: 130,
      key: 'isLandscape',
      render: cell => (<span>{LANDSCAPE[cell] || '-'}</span>)
    },
    {
      title: '长短类型',
      dataIndex: 'type',
      width: 120,
      key: 'type',
      render: cell => (<span>{VIDEO_LENGTH[cell] || '-'}</span>)
    },
    {
      title: '点赞数',
      dataIndex: 'praiseNum',
      width: 120,
      key: 'praiseNum',
    },
    {
      title: '收藏数',
      dataIndex: 'collectNum',
      width: 120,
      key: 'collectNum',
    },
    {
      title: '转发数',
      dataIndex: 'forwardNum',
      width: 120,
      key: 'forwardNum',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 200,
      key: 'createTime',
    },
    {
      title: '修改时间',
      dataIndex: 'updateTime',
      width: 200,
      key: 'updateTime',
    },

    {
      title: '操作',
      key: 'action',
      width: 120,
      fixed: 'right',
      render: (text, row) => (
        <span>
          <Button type="primary" shape="circle" icon={<EditOutlined />} title="edit" onClick={this.handleEditUser.bind(null, row)} />
          <Divider type="vertical" />
          <Button type="primary" shape="circle" icon={<DeleteOutlined />} title="delete" onClick={this.handleDeleteUser.bind(null, row)} />
        </span>
      )
    }

  ];
  render() {

    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta}>
          <Button type='primary' onClick={this.handleAddUser} icon={<PlusCircleOutlined />}>新增视频</Button>
        </SearchHeader>
        <br />
        <TableComponent
          tableConfig={{ 
            scroll:{y: 600, x: 1000 }
          }}
          getTableListApi={getVideoList}
          columns={this.columns}
          queryParams={this.state.listQuery}
          ref={this.tableRef}
          onGetData={this.handleGetData} />
        <EditForm
          title={this.state.editMode ? '编辑视频' : '新增视频'}
          editMode={this.state.editMode}
          currentRowData={this.state.currentRowData}
          visible={this.state.editUserModalVisible}
          onCancel={this.handleCancel}
          categoryList={this.state.categoryList}
          onOk={this.hadnleAditAddOkHandler}
        />
      </>
    );
  }
}

export default Video;
